<template>
    <!-- ref绑定到普通元素上，通过this.refs.refname获取元素对象-->
    <!-- ref绑定到子组件上，通过this.refs.refname获取组件对象 -->
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>


<script>
    //此项目中bscroll的使用有问题：因为bscroll有一个属性srcollHeight，
    //它会根据内容计算出可滚动的高度，然后图片的加载需要时间，导致计算的高度不准确
    //解决方法：监听每张图片的加载，加载成功执行refresh()
    import bScroll from 'better-scroll'
    export default {
        name:'Scroll',
        data () {
            return {
                scroll:null,
            }
        },
        props: {
            obj:{
                type:Object,
                default(){
                    return {
                        click:true,
                        probeType:0,
                    }
                }
            },
            data: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        mounted () {
            setTimeout(() => {
                // 加个定时器， 由于数据过多，高度无法精密计算
                if (!this.scroll) {
                    this.scroll = new bScroll(this.$refs.wrapper,this.obj);

                    //2、监听滚动位置
                    if(this.obj.probeType===2||this.obj.probeType===3){
                        this.scroll.on('scroll',position=>{
                            this.$emit('scrollPosition',position)
                        })
                    }
                    //3、上拉加载更多
                    if(this.obj.pullUpLoad){
                        this.scroll.on('pullingUp',()=>{
                            this.$emit('pullingUP')
                        })
                    }
                }
            }, 600)
        },
        methods: {
            scrollTo(x,y,time=500){
                this.scroll && this.scroll.scrollTo(x,y,time);
            },
            finishPullUp(){
                this.scroll && this.scroll.finishPullUp()
            },
            refresh(){                
                this.scroll && this.scroll.refresh()
            },
            getY(){
                return this.scroll ? this.scroll.y : 0;
            }
        },
        
        watch: {
            // 当数据拿到时，刷新better-scroll
            data() {
                if (this.scroll) {
                    setTimeout(this.refresh, 20);
                }
                
            }
        }
    }
</script>

<style scoped>

</style>